import Taro, {Component} from '@tarojs/taro'
import {Picker, View, ScrollView} from '@tarojs/components'
import {AtCard, AtTabs, AtTabsPane,AtButton} from 'taro-ui'
import moment from 'moment';
import { connect } from '@tarojs/redux'
import {getRaterPage } from './service'
import {scoreStatusList} from '../../constant'
import './index.scss'
import {setRefresh} from "../../actions/refresh";
import '../components/StatusLabel.scss'
import NoData from '../components/NoData'

@connect(({ refresh }) => ({
  refresh
}), (dispatch) => ({
  setRefresh (isRefresh) {
    dispatch(setRefresh(isRefresh))
  },
}))
export default class attendance extends Component {

  config = {
    navigationBarTitleText: '360评分',
  };

  constructor(props) {
    super(props);
    this.state = {
      current: 0,
      scoreListPage: 1,
      unScoreListPage: 1,
      scrollHeight: 0,
      scrollTop: 0,
      unScoreList: [],
      scoreList: [],
    }
  }

  scoreProps = {
    scrollY: true,
    upperThreshold: 10,
    lowerThreshold: 10,
    onScrollToLower: (event) => {
      const { scoreListPage } = this.state;
      this.initScoreList(scoreListPage+1);
      this.setState({scoreListPage: scoreListPage + 1})
    }
  };

  unScoreProps = {
    scrollY: true,
    upperThreshold: 10,
    lowerThreshold: 10,
    onScrollToLower: (event) => {
      const { unScoreListPage } = this.state;
      this.initUnScoreList(unScoreListPage+1);
      this.setState({unScoreListPage: unScoreListPage + 1})
    }
  };

  componentWillMount() {
  }

  componentDidMount() {
    Taro.getSystemInfo().then(res => {
      this.setState({scrollHeight: res.windowHeight-40})
    });
    this.initScoreList();
    this.initUnScoreList();
  }

  componentDidShow () {
    if (this.props.refresh.flag){
      this.initScoreList();
      this.initUnScoreList();
      this.props.setRefresh(false)
    }
  }

  initScoreList(pageNum = this.state.scoreListPage) {
    getRaterPage(pageNum).then(res => {
      if (res.list.length > 0){
        let list = [...this.state.scoreList, ...res.list];
        this.setState({scoreList: list});
      }
    })
  }

  initUnScoreList(pageNum = this.state.unScoreListPage) {
    getRaterPage(pageNum,0).then(res => {
      if (res.list.length > 0){
        let list = [...this.state.unScoreList, ...res.list];
        this.setState({unScoreList: list});
      }
    });
  }

  handleClick (value) {
    this.setState({current: value})
  }

  turnToScore(scoreData,isDetail) {
    let url = '/pages/360score/score/index';
    url += '?scoreData='+JSON.stringify({...scoreData, isDetail});
    this.setState({unScoreList: [],scoreList:[]});
    Taro.navigateTo({ url })
  }

  render() {
    const {current, unScoreList, scoreList, scrollHeight} = this.state;
    const tabList = [{ title: '未评分' }, { title: '已评分' }];
    return (
      <View className='score-360'>
        <AtTabs current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={current} index={0} >
            <ScrollView
              style={'height: '+scrollHeight+'px'}
              scrollY
              scrollWithAnimation
              {...this.scoreProps}
            >
              {
                (unScoreList && unScoreList.length > 0) ?
                unScoreList.map((item, index) => (
                  <View className='card' key={index} style='margin: 15pt 0'>
                    <AtCard
                      title={
                        <View  className='status-label'  style={`color: ${scoreStatusList.find(statusItem => statusItem.value === item.status).color}`}>
                          {scoreStatusList.find(statusItem => statusItem.value === item.status).label}
                        </View>
                      }>
                      <View className='card-content'>
                        <View className='contentItem'>
                          <View>创建时间:</View>
                          <View>{moment(item.createTime).format('YYYY-MM-DD')}</View>
                        </View>
                        <View className='contentItem'>
                          <View>被评分人:</View>
                          <View>{item.name}</View>
                        </View>
                        <View className='contentItem'>
                          <View>评分原因:</View>
                          <View>{item.programName}</View>
                        </View>
                      </View>
                      <View className='card-btnBar'>
                        <View className='btn' onClick={()=> this.turnToScore(item,false)}>评分</View>
                      </View>
                    </AtCard>
                  </View>
                )) : <NoData />
              }
            </ScrollView>
          </AtTabsPane>
          <AtTabsPane current={current} index={1}>
            <ScrollView
              scrollY
              scrollWithAnimation
              {...this.unScoreProps}
            >
              {
                (scoreList && scoreList.length > 0)  ?
                scoreList.map((item, index) => (
                  <View className='card' key={index} style='margin: 15pt 0'>
                    <AtCard
                      title={
                        <View className='status-label'  style={`color: ${scoreStatusList.find(statusItem => statusItem.value === item.status).color}`}>
                          {scoreStatusList.find(statusItem => statusItem.value === item.status).label}
                        </View>
                      }>
                      <View className='card-content'>
                        <View className='contentItem'>
                          <View>创建时间:</View>
                          <View>{moment(item.createTime).format('YYYY-MM-DD')}</View>
                        </View>
                        <View className='contentItem'>
                          <View>被评分人:</View>
                          <View>{item.name}</View>
                        </View>
                        <View className='contentItem'>
                          <View>评分原因:</View>
                          <View>{item.programName}</View>
                        </View>
                      </View>
                      <View className='card-btnBar'>
                        <View className='btn' onClick={()=> this.turnToScore(item,true)}>详情</View>
                      </View>
                    </AtCard>
                  </View>
                )) : <NoData />
              }
            </ScrollView>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}
